<template>
    <el-row>
        <el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>换表登记信息</span>
                </div>
                <el-descriptions class="margin-top" :column="3" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            客户名称
                        </template>
                        {{ formArr.customerName }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            客户类型
                        </template>
                        <template>
                            <dict-tag :options="dict.type.customer_type" :value="formArr.customerType" />
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            地址
                        </template>
                        {{ formArr.customerAddress }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            电话
                        </template>
                        {{ formArr.telephone }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            开户日期
                        </template>
                        {{ formArr.openDate }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            旧表余额
                        </template>
                        {{ formArr.oldRemainAmount }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            旧表号
                        </template>
                        {{ formArr.oldMeterCode }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            旧卡号
                        </template>
                        {{ formArr.oldCardNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            旧表厂家
                        </template>
                        {{ formArr.oldManufacturer }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            旧表类型
                        </template>
                        {{ formArr.oldMeterType }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            补气量
                        </template>
                        <el-input v-model="formArr.supplementGasVolume" @blur='supplementingBlur' placeholder="暂无"
                            clearable style="width: 200px" disabled />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            补气金额
                        </template>
                        <el-input v-model="formArr.supplementAmount" placeholder="暂无" disabled clearable
                            style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            超用气量
                        </template>
                        <el-input v-model="formArr.beyondVolume" disabled placeholder="暂无" @blur='purchasingBlur' clearable
                            style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            超用金额
                        </template>
                        <el-input v-model="formArr.beyondAmount" disabled placeholder="暂无"  clearable
                            style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <span class="xinghao">*</span>换表日期
                        </template>
                        <el-date-picker type="date" placeholder="暂无" disabled v-model="formArr.changeDate" style="width: 200px"
                            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <span class="xinghao">*</span>新表号
                        </template>
                        <el-input v-model="formArr.newMeterCode" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            新卡号
                        </template>
                        <el-input v-model="formArr.newCardNumber" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <span class="xinghao">*</span>新表厂家
                        </template>
                        <el-select v-model="formArr.newMeterManufacturer" filterable placeholder="暂无"
                            @change="getMeterListBySupplier" disabled style="width: 200px">
                            <el-option :label="item.supplierName" :value="item.id" v-for="(item, index) in supplierList"
                                :key="index">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <span class="xinghao">*</span>新表类型
                        </template>
                        <el-select v-model="formArr.newMeterType" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option :label="item.typeName" :value="item.id" v-for="(item, index) in meterBySupplierList"
                                :key="index">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                          <span class="xinghao">*</span>换表操作类型
                        </template>
                        <el-select v-model="formArr.changeType" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option v-for="dict in dict.type.change_meter_type" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            支付类型
                        </template>
                        <el-select v-model="formArr.paymentType" disabled filterable placeholder="暂无" style="width:200px">
                            <el-option label="现金" value="1"> </el-option>
                            <el-option label="微信" value="2"> </el-option>
                        </el-select>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            换表费
                        </template>
                        <el-input v-model="formArr.changeMeterFee" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                          <span class="xinghao">*</span>换表原因
                        </template>
                        <el-input v-model="formArr.changeReason" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            新表进气方向
                        </template>
                        <el-radio-group v-model="formArr.newIntakeDirection" disabled>
                            <el-radio label="L">左进</el-radio>
                            <el-radio label="R">右进</el-radio>
                        </el-radio-group>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            报警额度
                        </template>
                        <el-input v-model="formArr.newAlarmGas" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item> <el-descriptions-item>
                        <template slot="label">
                            DTU编号
                        </template>
                        <el-input v-model="formArr.newDtuCode" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            流量计厂家
                        </template>
                        <el-input v-model="formArr.newFlowmeterManufacturer" disabled placeholder="暂无" clearable
                            style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                          <span class="xinghao">*</span>计价方案
                        </template>
                        <el-select v-model="formArr.newPriceSchemeId" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option :label="item.schemeName" :value="item.id" v-for="(item, index) in schemeList"
                                :key="index">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            新表ICCID
                        </template>
                        <el-input v-model="formArr.newIccid" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            新表IMEI
                        </template>
                        <el-input v-model="formArr.newImei" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item> <el-descriptions-item>
                        <template slot="label">
                            流量计起始量
                        </template>
                        <el-input v-model="formArr.newInitialGas" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                          <span class="xinghao">*</span>是否带流量计
                        </template>
                        <el-select v-model="formArr.newIsFlowmeter" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option label="否" value="N"> </el-option>
                            <el-option label="是" value="Y"> </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            是否带GPRS
                        </template>
                        <el-select v-model="formArr.newIsGprs" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option label="否" value="N"> </el-option>
                            <el-option label="是" value="Y"> </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            通讯地址
                        </template>
                        <el-input v-model="formArr.newMailAddress" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            通讯协议
                        </template>
                        <el-input v-model="formArr.newMailProtocol" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                          <span class="xinghao">*</span>表计状态
                        </template>
                        <el-select v-model="formArr.newMeterStatus" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option label="待安装" :value="1"> </el-option>
                            <el-option label="已安装" :value="2"> </el-option>
                            <el-option label="已拆卸" :value="3"> </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                          <span class="xinghao">*</span>支持卡
                        </template>
                        <el-select v-model="formArr.newSupportCard" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option label="不支持" :value="0"> </el-option>
                            <el-option label="IC卡" :value="1"> </el-option>
                            <el-option label="NFC卡" :value="2"> </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                          <span class="xinghao">*</span>支持网络
                        </template>
                        <el-select v-model="formArr.newSupportNet" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option label="不支持" :value="0"> </el-option>
                            <el-option label="支持" :value="1"> </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                          <span class="xinghao">*</span>阀门状态
                        </template>
                        <el-select v-model="formArr.newValveStatus" disabled filterable placeholder="暂无" style="width: 200px">
                            <el-option label="关闭" :value="0"> </el-option>
                            <el-option label="开启" :value="1"> </el-option>
                            <el-option label="未知" :value="2"> </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            单价
                        </template>
                        <el-input v-model="formArr.price" disabled placeholder="暂无" clearable style="width: 200px" />
                    </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      备注
                    </template>
                    <el-input v-model="formArr.remark" disabled placeholder="暂无" clearable style="width: 200px" />
                  </el-descriptions-item>
                </el-descriptions>
            </el-card>
           
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>图片展示</span>
                </div>
                <el-image 
                    style="width: 100px; height: 100px"
                    :src="formArr" 
                    :preview-src-list="srcList">
                </el-image>
            </el-card>
            <div style="width: 100%;text-align: center;margin-top: 20px;">
                <el-button type="primary" @click="submitForm">返回</el-button>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import {  changemeterInfos, volumnToGasPrice } from "@/api/fileManagement/changeMeter.js"
import { getGasmeterList } from '@/api/systemSetup/gasMeter.js'
import { getSupplierList, } from "@/api/system/supplierInfo.js";
import { planSelectList } from "@/api/service/planlist.js";
export default {
    props: ['id'],
    name: "ChangeMeterSee",
    dicts: ['change_meter_type', 'customer_type'],
    data() {
        return {
            userId: '',
            loading: false,
            schemeList: [],
            supplierList: [],
            meterBySupplierList: [],
            size: 'mini',
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                customerType: null,
                customerName: null,
                idNumber: null,
                deptId: null,
                openDate: null,
                telephone: null,
                customerCode: null,
                meterId: null,
            },
            total: 0,
            formArr: {
                address: '',
                attachment: '',
                beyondGasAmount: '',
                beyondGasVolume: '',
                buyType: '',
                changeDate: '',
                changeMeterFee: "",
                changeReason: '',
                changeType: '',
                createTime: '',
                customerName: '',
                gasVolumn: '',
                intakeDirection: '',
                isPurchase: '',
                newAlarmGas: '',
                newBaseNumber: '',
                newCardNumber: '',
                newDtuCode: '',
                newFlowmeterManufacturer: '',
                newIccid: '',
                newImei: '',
                newInitialGas: '',
                newInstallTime: '',
                newIsFlowmeter: '',
                newIsGprs: '',
                newMailAddress: '',
                newMailProtocol: '',
                newMeterBrand: '',
                newMeterCode: '',
                newMeterManufacturer: '',
                newMeterModel: '',
                newMeterPhoneNum: '',
                newMeterStatus: '',
                newMeterType: '',
                newSupportCard: '',
                newPriceSchemeId: '',
                newSupportNet: '',
                oldBaseNumber: '',
                oldCardNumber: '',
                oldMeterBrand: '',
                oldMeterCode: "",
                oldManufacturer: '',
                oldMeterType: '',
                openDate: '',
                paidAmount: '',
                paymentType: '',
                price: '',
                remark: '',
                stationId: '',
                supplementGasAmount: '',
                supplementGasVolume: '',
                telephone: '',
                newIntakeDirection:'L'
            },
            srcList:[]
        }
    },
    created() {
        this.getsupplierList()
        this.getInfo()
        this.getPricingPlanList()
    },
    methods: {
        // 详情
        getInfo(){
            changemeterInfos(this.id).then((res) => {
                this.formArr = res.data
                this.srcList = []
            })
        },
        //补气量转化
        supplementingBlur() {
            let parm = {
                customerId: this.userId,
                payVolumn: this.formArr.supplementGasVolume
            }
            volumnToGasPrice(parm).then((res) => {
                if (res.code == 200) {
                    this.$set(this.formArr, 'supplementAmount', res.data)
                }
            })
            console.log(this.formArr.supplementGasVolume)

        },
        // 超用量转化
        purchasingBlur() {
            let parm = {
                customerId: this.userId,
                payVolumn: this.formArr.supplementGasVolume
            }
            volumnToGasPrice(parm).then((res) => {
                if (res.code == 200) {
                    this.$set(this.formArr, 'beyondAmount', res.data)
                }
            })
            console.log(this.formArr.beyondVolume)
        },
        // 查询计价方案
        getPricingPlanList() {
            planSelectList().then((res) => {
                this.schemeList = res
            })
        },
        /** 查询供应商列表 */
        getsupplierList() {
            getSupplierList().then((response) => {
                this.supplierList = response.data;

            });
        },
        // 供应商选择后获取表计类型
        getMeterListBySupplier() {
            getGasmeterList({ manufacturerId: this.formArr.newMeterManufacturer }).then((res) => {
                this.meterBySupplierList = res.data
            })
        },
        // 返回
        submitForm() {
            this.$emit('closeDialog1')
        },
    },


}
</script>
<style scoped>
    .xinghao{
        color:red;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>